<style lang="less" scoped>
.cw230 {
    width: 230px
}
.cw380 {
    width: 380px
}
.cw80 {
    width: 80px;
}
.cw100 {
    width: 100px;
}
</style>
<template>
    <div style="display: flex; position: relative">
        <Form ref="smsForm" :model="sms" :label-width="labelWidth110" label-position="left" :rules="smsValidate">
            <FormItem label="服务提供商" prop="serviceName">
                <Select v-model="sms.serviceName" @on-change="changeSms" placeholder="请选择" class="cw230">
                    <Option value="ALI_SMS">阿里云</Option>
                    <Option value="TENCENT_SMS">腾讯云</Option>
                </Select>
            </FormItem>
            <FormItem label="accessKey" prop="accessKey">
                <Input type="text" v-model="sms.accessKey" placeholder="请输入accessKey/secretId" :disabled="changeLoading" class="cw380" />
            </FormItem>
            <FormItem label="secretKey" prop="secretKey">
                <Tooltip placement="right" content="无法编辑时请先点击查看图标">
                    <Input
                        class="input-see cw380"
                        type="text"
                        v-model="sms.secretKey"
                        :readonly="!changedSmsSK"
                        @on-click="seeSecret(sms.serviceName)"
                        :disabled="changeLoading"
                        icon="ios-eye"
                        placeholder="请输入secretKey"
                    />
                </Tooltip>
            </FormItem>
            <FormItem v-if="sms.serviceName == 'TENCENT_SMS'" label="应用ID" prop="appId">
                <Input type="text" v-model="sms.appId" :disabled="changeLoading" placeholder="请输入应用ID（短信控制台-应用管理）" class="cw380" />
            </FormItem>
            <FormItem label="短信签名" prop="signName">
                <Input type="text" v-model="sms.signName" :disabled="changeLoading" placeholder="请输入短信签名，例如XBoot" class="cw380" />
            </FormItem>
            <FormItem label="使用场景" prop="type">
                <Select v-model="sms.type" @on-change="changeSmsType" :disabled="changeLoading" placeholder="请选择" class="cw380" transfer>
                    <Option value="0">通用验证码</Option>
                    <Option value="1">注册</Option>
                    <Option value="2">登录</Option>
                    <Option value="3">修改绑定手机号</Option>
                    <Option value="4">修改密码</Option>
                    <Option value="5">重置密码</Option>
                    <Option value="6">工作流消息</Option>
                </Select>
            </FormItem>
            <FormItem label="模版CODE/ID" prop="templateCode">
                <Input type="text" v-model="sms.templateCode" :disabled="changeLoading" placeholder="请输入场景对应短信模版CODE/ID，如SMS_123456789" style="width: 380px" />
            </FormItem>
            <FormItem>
                <Button type="primary" class="cw100" :disabled="changeLoading" :loading="saveLoading" @click="saveEditSms">保存更改</Button>
            </FormItem>
        </Form>
        <Spin fix v-if="loading"></Spin>
    </div>
</template>

<script>
import { checkSmsSet, seeSecretSet, getSmsSet, editSmsSet, getSmsTemplateCode } from '@/api/index';
export default {
    name: 'sms',
    data() {
        return {
            loading: false, // 表单加载状态
            changeLoading: false,
            saveLoading: false,
            sms: {
                serviceName: 'ALI_SMS',
                accessKey: '',
                secretKey: '',
                appId: '',
                signName: '',
                type: '',
                templateCode: ''
            },
            changedSmsSK: false, // 是否修改短信的secrectKey
            smsValidate: {
                // 表单验证规则
                serviceName: [{ required: true, message: '请选择', trigger: 'change' }],
                accessKey: [{ required: true, message: '不能为空', trigger: 'change' }],
                secretKey: [{ required: true, message: '不能为空', trigger: 'change' }],
                appId: [{ required: true, message: '不能为空', trigger: 'change' }],
                signName: [{ required: true, message: '不能为空', trigger: 'change' }],
                type: [{ required: true, message: '不能为空', trigger: 'change' }],
                templateCode: [{ required: true, message: '不能为空', trigger: 'blur' }]
            }
        };
    },
    methods: {
        init() {
            this.initSmsSet();
        },
        initSmsSet() {
            this.loading = true;
            checkSmsSet().then(res => {
                if (res.success && res.result) {
                    let sms = res.result;
                    getSmsSet(sms).then(res => {
                        this.loading = false;
                        if (res.result) {
                            // 转换null为""
                            for (let attr in res.result) {
                                if (res.result[attr] == null) {
                                    res.result[attr] = '';
                                }
                            }
                            this.sms = res.result;
                            this.sms.type = '0';
                            this.changeSmsType(this.sms.type);
                        } else {
                            this.changedSmsSK = true;
                        }
                    });
                } else {
                    this.loading = false;
                    this.changedSmsSK = true;
                }
            });
        },
        changeSms(v) {
            this.changeLoading = true;
            getSmsSet(v).then(res => {
                this.changeLoading = false;
                if (res.result) {
                    // 转换null为""
                    for (let attr in res.result) {
                        if (res.result[attr] == null) {
                            res.result[attr] = '';
                        }
                    }
                    this.sms = res.result;
                    this.changedSmsSK = false;
                    this.sms.type = '0';
                    this.changeSmsType(this.sms.type);
                } else {
                    this.sms = { serviceName: v };
                    this.sms.type = '0';
                    this.changedSmsSK = true;
                }
            });
        },
        seeSecret(name) {
            if (!name) {
                return;
            }
            seeSecretSet(name).then(res => {
                if (res.success) {
                    this.sms.secretKey = res.result;
                    this.changedSmsSK = true;
                }
            });
        },
        changeSmsType(v) {
            getSmsTemplateCode(this.sms.serviceName, v).then(res => {
                if (res.success) {
                    this.sms.templateCode = res.result;
                }
            });
        },
        saveEditSms() {
            this.$refs.smsForm.validate(valid => {
                if (valid) {
                    this.saveLoading = true;
                    this.sms.changed = this.changedSmsSK;
                    editSmsSet(this.sms).then(res => {
                        this.saveLoading = false;
                        if (res.success) {
                            this.$Message.success('保存成功');
                        }
                    });
                }
            });
        },
        onRestWindow() {
            this.labelWidth110 = this.searchLabelWidth(this.labelWidth110)
        }
    },
    mounted() {
        this.onRestWindow()
        window.addEventListener('resize',this.onRestWindow)
        this.init();
    },
    beforeDestroy() {
        window.removeEventListener('resize',this.onRestWindow)
    }
};
</script>
